﻿<script setup lang="ts" name="PageWrap">
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
const route = useRoute()

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)
const props = defineProps({
  direction: {
    type: String,
    default: 'row'
  }
})
// 滚动行为
useScrollPosition(route)
</script>

<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" :class="['no-border no-radius', direction]">
      <slot />
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-card {
  display: flex;
  flex-direction: column;
  overflow: inherit;

  &.row {

    :deep(>.el-card__body) {
      flex-direction: row;
    }
  }

  &.column {

    :deep(>.el-card__body) {
      flex-direction: column;
    }
  }

  :deep(>.el-card__body) {
    display: flex;
    flex: 1;
  }
}
</style>
